Q. React hook에서 클로저가 어떻게 쓰이는지 설명해 주세요.
🧑🏻💻 Answer.
✅ React Hook과 클로저
React hook에서는 주로 함수형 컴포넌트에서 이전 상태와 현 상태의 변경이 있는지를 감지하기 위해 클로저를 사용합니다.
React는 함수형 컴포넌트의 상태관리를 위해서 컴포넌트 외부에 배열 형태로 저장된 값을 사용합니다.
이때 렉시컬 스코프에 의해 함수가 정의된 시점을 기준으로 외부 변수를 참조하는 클로저의 특성을 활용하여, 리렌더링(= 함수 재호출) 시 외부에 배열 형태로 저장된 값에 구별 가능한 키로 접근해 이전 상태와 현재 상태를 비교하고 변경할 수 있게 됩니다.
이처럼 클로저를 사용하면 함수가 호출될 때마다 새로운 스코프를 생성하는 대신 이전 스코프의 변수를 유지할 수 있으므로, 상태를 올바르게 업데이트할 수 있게 됩니다.
참고로 각 컴포넌트의 상태 정보는 순서대로 배열로 저장되기 때문에 상태를 변화시키는 hook을 조건문이나 반복문 안에서 사용하면 잘못된 순서의 값을 참조하게 될 수 있습니다.